"use client";

import * as React from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { ArrowLeft, FlaskConical } from "lucide-react";
import type { GameDefinition, GameSymbol } from "@spinza/game-core";
import { Button } from "@/components/ui";
import { useAdminQuery } from "@/components/admin/use-query";
import type { GameDailyRow, GameDetailResponse, GameVersionRow, SimulationRunRow } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, DataTable, ErrorState, TableSkeleton, TileSkeleton, KV, Pill, LifecyclePill, PassFail, StatGrid, StatTile, Mono, type Column } from "@/components/admin/primitives";
import { Bars, ChartFrame, CHART, Lines } from "@/components/admin/charts";
import { CertificationBlock } from "@/components/admin/simulation-results";
import { dateTime, int, isoDay, multiplier, num, pct, sc, shortDate, signedPct, titleCase } from "@/components/admin/format";
import { VOLATILITY_LABEL, cn } from "@/lib/utils";

export default function AdminGameDetailPage() {
  const { slug } = useParams<{ slug: string }>();
  const q = useAdminQuery<GameDetailResponse>(slug ? `/api/admin/games/${slug}` : null);
  const d = q.data;
  const [certVersion, setCertVersion] = React.useState<string | null>(null);

  const anchor = q.updatedAt;
  const daily = React.useMemo(() => (d ? fillDays(d.daily, anchor) : []), [d, anchor]);
  const currentVersion = d?.versions.find((v) => v.version === d.game.version) ?? d?.versions[0] ?? null;
  const shownCert = d?.versions.find((v) => v.version === (certVersion ?? currentVersion?.version))?.certification ?? null;

  return (
    <>
      <PageHeader
        eyebrow="Game"
        title={d ? d.game.name : "Game detail"}
        description={
          d ? (
            <span className="inline-flex flex-wrap items-center gap-2">
              <Mono>
                {d.game.slug} · v{d.game.version}
              </Mono>
              <LifecyclePill lifecycle={d.game.lifecycle} />
              {currentVersion?.certification ? <PassFail pass={currentVersion.certification.status === "PASS"} label={`cert ${currentVersion.certification.status}`} /> : <Pill tone="warn">not certified</Pill>}
            </span>
          ) : undefined
        }
        actions={
          <>
            <Button variant="ghost" size="sm" href="/admin/games">
              <ArrowLeft className="h-3.5 w-3.5" /> All games
            </Button>
            <RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />
            <Button variant="accent" size="sm" href={`/admin/simulator?slug=${slug}`}>
              <FlaskConical className="h-3.5 w-3.5" /> Run simulation
            </Button>
          </>
        }
      />

      {q.error && !d ? (
        <ErrorState error={q.error} onRetry={() => void q.refresh()} title={q.error.status === 404 ? "Game not found" : undefined} />
      ) : !d ? (
        <div className="space-y-4">
          <TileSkeleton count={6} cols={6} />
          <Panel>
            <TableSkeleton rows={8} cols={6} />
          </Panel>
        </div>
      ) : (
        <div className={cn("space-y-4", q.stale && "opacity-70")}>
          {/* Stats */}
          <StatGrid cols={6}>
            <StatTile label="Launches" value={int(d.stats?.launches ?? 0)} compact />
            <StatTile label="Spins" value={int(d.stats?.spins ?? 0)} compact />
            <StatTile label="Wagered / won" value={<span>{sc(d.stats?.wagered ?? 0)} <span className="text-fg-4">/</span> {sc(d.stats?.won ?? 0)}</span>} compact />
            <StatTile label="Effective RTP" value={pct(effRtp(d.stats?.wagered, d.stats?.won))} sub={d.definition ? `target ${pct(d.definition.rtp)}` : undefined} tone="accent" compact />
            <StatTile label="Hit rate" value={d.stats?.spins ? pct(num(d.stats.wins) / num(d.stats.spins)) : "—"} sub={`${int(d.stats?.bonuses ?? 0)} bonuses · ${int(d.stats?.freeSpins ?? 0)} FS`} compact />
            <StatTile label="Max win" value={multiplier(d.stats?.maxMultiplier ?? 0)} sub={`${sc(d.stats?.maxWin ?? 0)} · ${int(d.stats?.bigWins ?? 0)} big wins · ${int(d.stats?.favorites ?? 0)} ♥`} compact />
          </StatGrid>

          <div className="grid gap-4 xl:grid-cols-[1fr_1.4fr]">
            {/* Definition */}
            <Panel title="Definition" description={d.definition ? d.definition.tagline : "Definition missing from the game library"}>
              {d.definition ? <DefinitionSummary def={d.definition} /> : <p className="text-[13px] text-danger">The slug is in the database but no definition is registered in @spinza/games.</p>}
            </Panel>

            {/* Daily charts */}
            <Panel title="Last 30 days" description="Daily spins, distinct players and effective RTP">
              <div className="grid gap-5 md:grid-cols-3">
                <ChartFrame title="Spins" height={150}>
                  <Bars data={daily} x="day" series={[{ key: "spins", label: "Spins", color: CHART.accent }]} xFormat={(v) => shortDate(String(v))} barSize={8} />
                </ChartFrame>
                <ChartFrame title="Players" height={150}>
                  <Bars data={daily} x="day" series={[{ key: "players", label: "Players", color: CHART.grey }]} xFormat={(v) => shortDate(String(v))} barSize={8} />
                </ChartFrame>
                <ChartFrame title="RTP" height={150}>
                  <Lines data={daily.filter((r) => r.rtp !== null)} x="day" series={[{ key: "rtp", label: "RTP", color: CHART.accent }]} xFormat={(v) => shortDate(String(v))} yFormat={(v) => `${Math.round(v * 100)}%`} reference={d.definition ? { y: d.definition.rtp } : undefined} dots />
                </ChartFrame>
              </div>
              {daily.every((r) => r.spins === 0) ? <p className="mt-3 text-center text-[12px] text-fg-4">No rounds recorded in the last 30 days.</p> : null}
            </Panel>
          </div>

          {/* Symbols */}
          {d.definition ? (
            <Panel title="Symbols & pays" description={`Pays are multiples of ${d.definition.payModel.type === "ways" ? "a bet unit (total bet ÷ " + d.definition.betDivisor + ")" : "the line bet"}; scatter pays are × total bet`} padded={false}>
              <SymbolsTable def={d.definition} />
            </Panel>
          ) : null}

          <div className="grid gap-4 xl:grid-cols-[1fr_1.4fr]">
            {/* Versions */}
            <Panel title="Versions" description="Click a version to view its certification" padded={false}>
              <DataTable<GameVersionRow>
                columns={[
                  { key: "version", header: "Version", render: (v) => <span className={cn("font-mono text-[12px]", v.version === d.game.version ? "text-fg" : "text-fg-3")}>v{v.version}{v.version === d.game.version ? <span className="ml-1.5 text-[10px] uppercase text-accent-2">current</span> : null}</span> },
                  { key: "status", header: "Status", render: (v) => <Pill tone={v.status === "published" ? "success" : v.status === "certified" ? "accent" : "muted"}>{v.status}</Pill> },
                  { key: "cert", header: "Certification", render: (v) => (v.certification ? <PassFail pass={v.certification.status === "PASS"} /> : <span className="text-fg-4">none</span>) },
                  { key: "created", header: "Created", render: (v) => <span className="text-fg-3">{dateTime(v.createdAt)}</span> },
                  { key: "hash", header: "Hash", mono: true, render: (v) => <Mono title={v.definitionHash}>{v.definitionHash.slice(0, 12)}</Mono> },
                ]}
                rows={d.versions}
                rowKey={(v) => v.version}
                dense
                onRowClick={(v) => setCertVersion(v.version)}
                rowClassName={(v) => (v.version === (certVersion ?? currentVersion?.version) ? "bg-surface-2" : undefined)}
                empty="No versions recorded."
              />
            </Panel>

            {/* Simulation runs */}
            <Panel title="Recent simulation runs" description="Latest 10 for this game" padded={false}>
              <DataTable<SimulationRunRow>
                columns={runCols}
                rows={d.simulationRuns}
                rowKey={(r) => r.id}
                dense
                empty="No simulations yet — run one from the simulator."
              />
            </Panel>
          </div>

          {shownCert ? (
            <CertificationBlock cert={shownCert} title={`Certification · v${certVersion ?? currentVersion?.version}`} />
          ) : (
            <Panel title="Certification" tone="danger">
              <p className="text-[13px] text-fg-2">
                No certification report for v{certVersion ?? d.game.version}. Publishing is blocked until a simulation with <span className="font-semibold">certify</span> enabled passes for the current version.
              </p>
              <Button variant="outline" size="sm" className="mt-3" href={`/admin/simulator?slug=${slug}&certify=1`}>
                <FlaskConical className="h-3.5 w-3.5" /> Certify now
              </Button>
            </Panel>
          )}
        </div>
      )}
    </>
  );
}

const runCols: Column<SimulationRunRow>[] = [
  { key: "created", header: "Started", render: (r) => <span className="text-fg-3">{dateTime(r.createdAt)}</span> },
  { key: "spins", header: "Spins", align: "right", render: (r) => int(r.spins) },
  { key: "status", header: "Status", render: (r) => <Pill tone={r.status === "done" ? "success" : r.status === "failed" ? "danger" : "info"}>{r.status === "running" ? `${Math.round((num(r.progress) / Math.max(1, num(r.spins))) * 100)}%` : r.status}</Pill> },
  { key: "rtp", header: "Observed RTP", align: "right", render: (r) => (r.result?.simulation ? <span>{pct(r.result.simulation.observedRtp, 3)} <span className="text-fg-4">({signedPct(r.result.simulation.deviation, 2)})</span></span> : "—") },
  { key: "cert", header: "Cert", render: (r) => (r.result?.certification ? <PassFail pass={r.result.certification.status === "PASS"} /> : <span className="text-fg-4">—</span>) },
  { key: "open", header: "", align: "right", render: (r) => <Link href={`/admin/simulator?run=${r.id}`} className="text-[12px] text-fg-3 hover:text-fg">Open →</Link> },
];

function effRtp(wagered: unknown, won: unknown): number | null {
  const w = num(wagered);
  return w ? num(won) / w : null;
}

function fillDays(rows: GameDailyRow[], anchor: number) {
  const byDay = new Map(rows.map((r) => [isoDay(r.day), r]));
  const out: { day: string; spins: number; players: number; rtp: number | null }[] = [];
  for (let i = 29; i >= 0; i--) {
    const d = new Date(anchor - i * 86400_000).toISOString().slice(0, 10);
    const r = byDay.get(d);
    out.push({ day: d, spins: r ? num(r.spins) : 0, players: r ? num(r.players) : 0, rtp: r && num(r.wagered) ? num(r.won) / num(r.wagered) : null });
  }
  return out;
}

const FEATURE_KEYS: (keyof GameDefinition)[] = ["wild", "scatter", "cascades", "spinCollect", "holdRespin", "pickBonuses", "meter", "heat", "mystery", "randomFeatures", "quantum", "dynamicGrid", "jackpot"];

function DefinitionSummary({ def }: { def: GameDefinition }) {
  const mechanics = FEATURE_KEYS.filter((k) => def[k] !== undefined);
  return (
    <div className="space-y-4">
      <KV
        cols={3}
        items={[
          { label: "Grid", value: `${def.grid.reels} × ${def.grid.rows}` },
          { label: "Pay model", value: def.payModel.type === "ways" ? "Ways" : `${def.payModel.lines.length} lines` },
          { label: "Volatility", value: `${VOLATILITY_LABEL[def.volatility] ?? def.volatility}` },
          { label: "Target RTP", value: pct(def.rtp) },
          { label: "Max multiplier", value: `${int(def.maxMultiplier)}×` },
          { label: "Bets", value: `${sc(def.minBet)} – ${sc(def.maxBet)}` },
          { label: "Pay scale", value: def.payScale.toFixed(4), mono: true },
          { label: "Bet divisor", value: String(def.betDivisor), mono: true },
          { label: "Theme", value: def.theme },
        ]}
      />
      <div>
        <div className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-fg-4">Features</div>
        <div className="flex flex-wrap gap-1.5">
          {def.featureNames.map((f) => (
            <Pill key={f} tone="accent">
              {f}
            </Pill>
          ))}
          {def.featureNames.length === 0 ? <span className="text-[12px] text-fg-4">—</span> : null}
        </div>
      </div>
      <div>
        <div className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-fg-4">Mechanics configured</div>
        <div className="flex flex-wrap gap-1.5">
          {mechanics.map((m) => (
            <Pill key={m} tone="neutral">
              {titleCase(String(m))}
            </Pill>
          ))}
          {def.freeSpinsPersistentMultiplier ? <Pill tone="neutral">Persistent FS multiplier</Pill> : null}
        </div>
      </div>
      <div>
        <div className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-fg-4">Presentation</div>
        <div className="flex flex-wrap items-center gap-2 text-[12px] text-fg-2">
          {(["primary", "secondary", "glow", "bg", "surface"] as const).map((k) => (
            <span key={k} className="inline-flex items-center gap-1">
              <span className="inline-block h-3 w-3 rounded-[3px] border border-line" style={{ background: def.presentation.palette[k] }} />
              {k}
            </span>
          ))}
          <span className="text-fg-4">·</span>
          <span>{def.presentation.particles}</span>
          <span className="text-fg-4">·</span>
          <span>{def.presentation.frame}</span>
          <span className="text-fg-4">·</span>
          <span>{def.presentation.backdrop}</span>
        </div>
      </div>
      {def.tags.length ? <div className="text-[12px] text-fg-4">{def.tags.map((t) => `#${t}`).join("  ")}</div> : null}
    </div>
  );
}

function SymbolsTable({ def }: { def: GameDefinition }) {
  const counts = Array.from({ length: Math.max(0, def.grid.reels - 2) }, (_, i) => i + 3);
  const fmtWeight = (w: number | number[] | undefined) => (w === undefined ? "—" : Array.isArray(w) ? w.join(" / ") : String(w));
  const cols: Column<GameSymbol>[] = [
    {
      key: "id",
      header: "Symbol",
      render: (s) => (
        <span className="inline-flex items-center gap-2">
          <span className="inline-block h-3.5 w-3.5 rounded-[4px] border border-line" style={{ background: s.style.color, boxShadow: s.style.glow ? `0 0 ${Math.round(s.style.glow * 8)}px ${s.style.accent ?? s.style.color}` : undefined }} />
          <span className="font-medium text-fg">{s.name}</span>
          <Mono className="text-fg-4">{s.id}</Mono>
        </span>
      ),
    },
    { key: "kind", header: "Kind", render: (s) => <Pill tone={s.kind === "regular" ? "muted" : s.kind === "wild" ? "accent" : s.kind === "scatter" ? "info" : "warn"}>{s.kind}</Pill> },
    { key: "tier", header: "Tier", render: (s) => <span className="text-fg-3">{s.tier}</span> },
    { key: "weight", header: "Weight", align: "right", mono: true, render: (s) => fmtWeight(s.weight) },
    { key: "fsweight", header: "FS weight", align: "right", mono: true, render: (s) => (s.freeSpinWeight !== undefined ? fmtWeight(s.freeSpinWeight) : <span className="text-fg-4">—</span>) },
    ...counts.map<Column<GameSymbol>>((c) => ({
      key: `pay${c}`,
      header: `${c}×`,
      align: "right",
      render: (s) => {
        const p = s.pays?.[c];
        const sp = s.scatterPays?.[c];
        if (p === undefined && sp === undefined) return <span className="text-fg-4">·</span>;
        return (
          <span className="tabular">
            {p !== undefined ? p : null}
            {sp !== undefined ? <span className="text-info">{p !== undefined ? " / " : ""}{sp}×bet</span> : null}
          </span>
        );
      },
    })),
  ];
  return <DataTable columns={cols} rows={def.symbols} rowKey={(s) => s.id} dense />;
}